import { getHospitalDetailRequest } from "@/api/hospital/hospitalList";
import { getHospitalDetailType } from "@/api/hospital/model/hospitalListType";
import { Button, Card, Descriptions } from "antd";
import React, { useEffect, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";

export default function HospitalDetail() {
  // 接收医院列表传过来的id
  const { id } = useParams();
  // console.log(id);

  const navigate = useNavigate();

  //接收请求的数据
  const [hosDetail, setHosDetail] = useState<getHospitalDetailType>({});

  useEffect(() => {
    const getHospitalDetail = async () => {
      const result = await getHospitalDetailRequest(id as string);
      // console.log(result);
      setHosDetail(result);
    };
    getHospitalDetail();
  }, []);

  const goBackLastHandle = () => {
    navigate(-1);
  };

  return (
    <div>
      <Card>
        <Descriptions title="基本信息" bordered column={2}>
          <Descriptions.Item label="医院名称">
            {hosDetail.hospital?.hosname}
          </Descriptions.Item>
          <Descriptions.Item label="医院logo">
            {hosDetail.hospital?.logoData ? (
              <img
                width={100}
                src={`data:image/jpeg;base64,${hosDetail.hospital?.logoData}`}
                alt=""
              />
            ) : (
              ""
            )}
          </Descriptions.Item>
          <Descriptions.Item label="医院编码">
            {hosDetail.hospital?.hoscode}
          </Descriptions.Item>
          <Descriptions.Item label="医院地址">
            {hosDetail.hospital?.param.fullAddress}
          </Descriptions.Item>
          <Descriptions.Item label="坐车路线" span={2}>
            {hosDetail.hospital?.route}
          </Descriptions.Item>
          <Descriptions.Item label="医院简介">
            {hosDetail.hospital?.intro}
          </Descriptions.Item>
        </Descriptions>

        <Descriptions
          title="预约规则信息"
          bordered
          column={2}
          style={{ marginTop: "25px" }}
        >
          <Descriptions.Item label="预约周期">
            {hosDetail.bookingRule?.cycle}
          </Descriptions.Item>
          <Descriptions.Item label="放号时间">
            {hosDetail.bookingRule?.releaseTime}
          </Descriptions.Item>
          <Descriptions.Item label="停挂时间">
            {hosDetail.bookingRule?.stopTime}
          </Descriptions.Item>
          <Descriptions.Item label="退号时间">
            {hosDetail.bookingRule?.quitTime}
          </Descriptions.Item>
          <Descriptions.Item label="预约规则" span={2}>
            {hosDetail.bookingRule?.rule.map((item, index) => (
              <p key={index}>{item}</p>
            ))}
          </Descriptions.Item>
        </Descriptions>

        <Button style={{ marginTop: "15px" }} onClick={goBackLastHandle}>
          返回
        </Button>
      </Card>
    </div>
  );
}
